<template>
  <div class="app-container">
    <el-form
      ref="forms"
      :model="form"
      :rules="rules"
      class="headStyle"
    >
      <el-form-item label="选择类型" prop="type">
        <el-select v-model="form.type" filterable style="width: 150px;">
          <el-option
            v-for="dict in [
              { label: 'ups', value: '1' },
              { label: 'fexdex', value: '2' },
            ]"
            :key="dict.value"
            :value="dict.value"
            :label="dict.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="输入主转单号" prop="orderNo">
        <el-input
          v-model="form.orderNo"
          type="textarea"
          placeholder="单号请用英文,号分开"
          clearable
          :autosize="{ minRows: 2, maxRows: 4 }"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSelect">查询</el-button>
        <el-button type="info" @click="cancel">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8" style="margin-top: 5px;">
      <el-col :span="1.5">
        <el-button
          v-show="isshow"
          v-loading="btnloading"
          type="primary"
          text
          :icon="Download"
          @click="handleExport"
        >
          导出数据
        </el-button>
      </el-col>
    </el-row>
  </div>
  <Trajectories ref="tarRef" />
</template>
<script lang="ts" setup>
import { ref, defineAsyncComponent, getCurrentInstance } from 'vue'
import { Download } from '@element-plus/icons-vue'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { replaceParams } from '@/utils/index'
import { serachTracking, fedexTrack } from '@/api/expressManager/upstarck'

const Trajectories = defineAsyncComponent(() => import('@/components/trajectories/index.vue'))
const { proxy } = getCurrentInstance() as any
const form = ref({
  orderNo: '',
  type: '1',
})
const packageList = ref([])
const btnloading = ref(false)
const isshow = ref(false)
const tarRef = ref(undefined)
const forms = ref(undefined),
  {
    appContext: {
      config: {
        globalProperties: { $download, $validateForm },
      },
    },
  } = getCurrentInstance()
const rules = {
  orderNo: [{ required: true, message: '主转单号必填', trigger: 'blur' }],
}
const handleSelect = () => {
  $validateForm(forms.value, async () => {
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    })
   
    try {
      proxy.form.trackingNumber = replaceParams(proxy.form.orderNo).split(',')
      let res
      if (proxy.form.type == 1) {
        res = await serachTracking(proxy.form)
      } else {
        res = await fedexTrack(proxy.form)
      }
      if (res.code == 200) {
        loading.close()
        packageList.value = res.data
        tarRef.value.packageList = res.data
        proxy.isshow = !proxy.isshow
      } else {
        ElMessageBox.alert('暂无数据')
      }
    } catch (error) {
      console.log(error)
      loading.close()
    }
    // serachTracking()
  })
}
const handleExport = () => {
  proxy.form.trackingNumber = replaceParams(proxy.form.orderNo).split(',')
  if (proxy.packageList.length == 0) {
    ElMessage.info('包裹为空')
  }
  return $download('inwardapi/ups/exportTracking', { data: JSON.stringify(proxy.packageList) }, `batchTrajectoryExport${ new Date().getTime() }.xlsx`)
}
const cancel = () => {
  form.value.type = '1'
  form.value.orderNo = ''
}
</script>
<style lang="less" scoped>
.app-container {
  margin: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

</style>